<template>
    <jb-crud-page
        ref="postPage"
        title-icon="carbon:batch-job"
        title-text="Demo演示"
        search-url="/api/admin/demoTable/datas"
        :search-conditions="pageConditions"
        :edit-component="DemoEdit"
    >
        <template #conditions-form>
            <jb-input
                v-model:value="pageConditions.keywords"
                placeholder="输入关键字搜索"
                @keyup.enter="postPage?.loadData(true)"
            />
            <jb-select
                v-model:value="pageConditions.sex"
                url="/api/admin/dictionary/options?typeKey=sex"
                placeholder="=性别="
                class="w-130px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.enable"
                url="/api/admin/dictionary/options?typeKey=options_enable"
                placeholder="=状态="
                filterable
                class="w-100px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.type"
                url="/api/admin/dictionary/options?typeKey=dept_type"
                placeholder="=类型="
                :clearable="false"
                class="w-130px"
                filterable
            ></jb-select>
            <n-date-picker
                v-model:formatted-value="pageConditions.startTime"
                placeholder="=开始时间="
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
                class="w-190px"
            />
        </template>
        <template #opt>
            <n-button-group>
                <jb-btn
                    ghost
                    type="primary"
                    :icon="Icons.ADD"
                    @click="postPage?.showEditModal('新增Demo数据')"
                >
                    新增
                </jb-btn>
            </n-button-group>
        </template>
        <template #default="{ list, tableStartIndex }">
            <jb-table
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{ height: 100 }"
            >
                >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="姓名"
                    min-width="140"
                    sortable
                    fixed="left"
                    :filters="filterNameOptions"
                    :filter-method="filterNameMethod"
                    :filter-recover-method="filterNameRecoverMethod"
                >
                    <template #filter="{ $panel, column }">
                        <n-input
                            v-for="(option, index) in column.filters"
                            :key="index"
                            v-model:value="option.data"
                            @input="$panel.changeOption($event, !!option.data, option)"
                            @keyup.enter="$panel.confirmFilter()"
                            placeholder="按回车确认筛选"
                        >
                        </n-input>
                    </template>
                </jb-column>
                <jb-column field="avatar" title="头像" width="100">
                    <template #default="{ row }">
                        <jb-avatar :src="row.avatar"></jb-avatar>
                    </template>
                </jb-column>
                <jb-column
                    field="phone"
                    title="手机号"
                    min-width="140"
                    :filters="filterPhoneOptions"
                    :filter-method="filterPhoneMethod"
                    :filter-recover-method="filterPhoneRecoverMethod"
                >
                    <template #filter="{ $panel, column }">
                        <n-input
                            v-for="(option, index) in column.filters"
                            :key="index"
                            v-model:value="option.data"
                            @input="$panel.changeOption($event, !!option.data, option)"
                            @keyup.enter="$panel.confirmFilter()"
                            placeholder="按回车确认筛选"
                        >
                        </n-input>
                    </template>
                </jb-column>
                <jb-column field="age" title="年龄" width="100"></jb-column>

                <jb-column
                    field="sex"
                    title="性别"
                    width="100"
                    :filter-multiple="false"
                    :filters="sexOptions"
                    sortable
                >
                    <template #default="{ row }">
                        <n-tag
                            v-if="row.sex"
                            :type="row.sex === 1 ? 'success' : 'warning'"
                            >{{
                                row?.sex === 1 ? '男' : row?.sex === 2 ? '女' : ''
                            }}</n-tag
                        >
                    </template>
                </jb-column>
                <!--                <jb-column-->
                <!--                    field="roles"-->
                <!--                    title="角色"-->
                <!--                    min-width="140"-->
                <!--                    :filters="filterOptions"-->
                <!--                    :filter-method="filterRolesMethod"-->
                <!--                    :filter-recover-method="filterRolesRecoverMethod"-->
                <!--                >-->
                <!--                    <template #default="{ row }">-->
                <!--                        <n-scrollbar v-if="row.roles" style="max-height: 100px">-->
                <!--                            <jb-tag-group :tags="row.roleNames"></jb-tag-group>-->
                <!--                        </n-scrollbar>-->
                <!--                        <span v-else>未设置</span>-->
                <!--                    </template>-->
                <!--                </jb-column>-->

                <jb-column field="briefInfo" title="简介" min-width="160"></jb-column>
                <jb-column field="content" title="详情" width="120">
                    <template #default="{ row }">
                        <jb-btn
                            :icon="Icons.EYE"
                            type="primary"
                            secondary
                            tip-text="点击查看"
                            drawer-title="详情描述"
                            :drawer-html="row.content"
                            drawer-positive-text=""
                            circle
                        ></jb-btn>
                    </template>
                </jb-column>
                <jb-column
                    field="enable"
                    title="是否启用"
                    width="180"
                    fixed="right"
                    :filter-multiple="false"
                    :filters="enableOptions"
                    sortable
                >
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/post/toggleEnable/${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            type="warning"
                            secondary
                            circle
                            @click="
                                postPage?.showEditModal('编辑Demo数据', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            class="mx-8px"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/demoTable/delete/${row.id}`"
                            @success="postPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import DemoEdit from './components/edit/index.vue'
import { VxeColumnPropTypes } from 'vxe-table'

const postPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    sex: '',
    type: '',
    enable: '',
    startTime: null
})

const filterNameOptions = ref([{ name: '' }])
const filterNameMethod: VxeColumnPropTypes.FilterMethod<any> = ({ option, row }) => {
    return row.name.includes(option.name)
}
const filterNameRecoverMethod: VxeColumnPropTypes.FilterRecoverMethod<any> = ({
    option
}) => {
    option.name = ''
}

const filterPhoneOptions = ref([{ phone: '' }])
const filterPhoneRecoverMethod: VxeColumnPropTypes.FilterRecoverMethod<any> = ({
    option
}) => {
    option.phone = ''
}
const filterPhoneMethod: VxeColumnPropTypes.FilterMethod<any> = ({ option, row }) => {
    return row.phone.includes(option.phone)
}

const sexOptions = ref([
    { label: '男', value: 1 },
    { label: '女', value: 2 }
])

const enableOptions = ref([
    { label: '启用', value: true },
    { label: '禁用', value: false }
])
</script>

<style scoped></style>
